<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-26 10:34:09
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-26 14:56:45
-->
<template>
    <div class="main-content-right">
        <div class="title">学情分</div>

        <div class="stateBox">
            <div class="stateLeft">
                <div class="stateImg">
                    <img src="../../../../assets/images/icon/xueqingfen.png" />
                </div>
                <div>
                    <div class="stateTitle">学情分</div>
                    <div class="stateFen">{{ userInfo.cion }}</div>
                </div>
            </div>
            <div>
                <el-button type="text" @click="dialogVisible = true"
                    >查看规则</el-button
                >
            </div>
        </div>
        <div class="selectBox">
            <el-form :inline="true">
                <el-form-item label="选择日期">
                    <el-date-picker
                        v-model="time"
                        type="month"
                        placeholder="选择月"
                        @change="changeSelect"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select
                        v-model="budgetType"
                        placeholder="活动区域"
                        @change="changeSelect"
                    >
                        <el-option
                            :label="item.label"
                            :value="item.value"
                            v-for="item in option"
                            :key="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="details">
            <div>{{ time | getTime }}</div>
            <div>
                <span>收入 {{ income_num }}</span>
                <span>支出 {{ expenditure_num }}</span>
            </div>
        </div>
        <div class="listBox">
            <div v-for="(item, index) in studyList" :key="index">
                <div class="listItem">
                    <div>
                        <div
                            v-if="
                                (item.cion_type == 1 &&
                                    item.cion_datail_data.sign_type == 1) ||
                                    item.cion_type == 2 ||
                                    item.cion_type == 3 ||
                                    item.cion_type == 7
                            "
                        >
                            {{ item.cion_type_str }}
                        </div>
                        <div
                            v-else-if="
                                item.cion_type == 1 &&
                                    item.cion_datail_data.sign_type == 2
                            "
                        >
                            {{ item.cion_type_str }}(连续七天签到)
                        </div>
                        <div
                            v-else-if="
                                item.cion_type == 4 || item.cion_type == 5
                            "
                        >
                            {{ item.cion_type_str }}({{
                                item.cion_datail_data.subject_name
                            }}{{ item.cion_datail_data.section_name }})
                        </div>
                        <div v-else-if="item.cion_type == 6">
                            {{ item.cion_type_str }}({{
                                item.cion_datail_data.ename
                            }})
                        </div>
                        <div
                            v-else-if="
                                (item.cion_type == 8 ||
                                    item.cion_type == 9 ||
                                    item.cion_type == 10 ||
                                    item.cion_type == 11) &&
                                    item.cion_datail_data
                            "
                        >
                            {{ item.cion_type_str }}({{
                                item.cion_datail_data.name
                            }})
                        </div>
                        <div v-else>未知</div>
                        <div class="timeText">
                            {{ item.creat_time | getTime }}
                        </div>
                    </div>
                    <div class="money green" v-if="item.budget_type == 1">
                        +{{ item.cion }}
                    </div>
                    <div class="money" v-if="item.budget_type == 2">
                        -{{ item.cion }}
                    </div>
                </div>
                <el-divider></el-divider>
            </div>
            <div v-if="studyList.length == 0" class="noMore">
                -- 本月暂无明细 --
            </div>
            <!-- //分页 -->
            <div class="bottomPagination">
                <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 30, 50]"
                    :page-size="pagesize"
                    layout=" sizes, prev, pager, next,total, jumper"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                />
            </div>
        </div>
        <!-- //规则弹窗 -->
        <el-dialog
            title="学情分获取规则"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <div class="content">
                <div class="text">
                    1.<span
                        >每签到1天奖励绩效分10分，连续签到七天额外奖励绩效分100分，具体参考签到规则</span
                    >
                </div>
                <div class="text">
                    2.<span>通过充值的方式兑换绩效分，1元=10000绩效分</span>
                </div>
                <div class="text">
                    3.<span
                        >趣练、同步、智测、自评模块，每完成一份试卷/一组试题，获得10学情分，正确率低于60%不得学情分</span
                    >
                </div>
                <div class="text">
                    4.<span
                        >班级中第一个提交作业，获得10学情分。作业内容正确率100%，获得20学情分。晚交作业罚扣10学情分，缺一次作业罚扣20学情分</span
                    >
                </div>
                <div class="text">
                    5.<span
                        >班级中随堂练习、班级考试，第一个提交练习/试卷的学生，获得10学情分。分数/正确率第一名奖励20学情分。缺考、缺练的学生一次罚扣20学情分</span
                    >
                </div>
                <div class="text">
                    6.<span>PK获胜可获得最高1000学情分</span>
                </div>
                <div class="last">*以上信息最终解释权归智学星所有</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUserInfo } from "@/api/login/index";
import { getCionList } from "@/api/smartPay/index";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    data() {
        return {
            userInfo: {},
            time: new Date(),
            budgetType: 0,
            option: [
                {
                    value: 0,
                    label: "全部"
                },
                {
                    value: 1,
                    label: "收入"
                },
                {
                    value: 2,
                    label: "支出"
                }
            ],
            page: 1,
            pagesize: 10,
            total: 0,
            income_num: 0, //收入
            expenditure_num: 0, //支出
            studyList: [],
            dialogVisible: false
        };
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                var time = new Date(val);
                return getFormatTime(time.getTime(), false);
            }
        }
    },
    created() {
        this.UserInfo();
        this.CionList();
    },
    methods: {
        async UserInfo() {
            var query = {
                k_token: this.$store.getters.k_token
            };
            var list = await getUserInfo(query);
            console.log("个人信息：", list);
            if (list.code == 200) {
                this.userInfo = list.data;
            }
        },
        async CionList() {
            var time = new Date(this.time);
            var year = time.getFullYear();
            var month = time.getMonth();
            var start = Date.UTC(year, month, 1, -8, 0, 0) / 1000;
            var end;
            if (month == 11) {
                end = parseInt(this.startTime + 2678399);
            } else {
                end = Date.UTC(year, month + 1, 1, -8, 0, 0) / 1000;
            }
            var query = {
                page: this.page,
                pagesize: this.pagesize,
                startTtime: start,
                endingTime: end
            };
            if (this.budgetType != 0) {
                query.budgetType = this.budgetType;
            }

            var list = await getCionList(query);
            console.log("详情", list);
            if (list.code == 200) {
                this.expenditure_num = list.data.expenditure_num;
                this.income_num = list.data.income_num;
                this.total = list.data.total;
                var studyList = list.data.data;
                for (var i = 0; i < studyList.length; i++) {
                    studyList[i].cion_type_str = this.getType(
                        studyList[i].cion_type
                    );
                    if (studyList[i].cion == null) {
                        studyList[i].cion = 0;
                    }
                }
                this.studyList = studyList;
            } else {
                this.expenditure_num = 0;
                this.income_num = 0;
                this.studyList = [];
                this.total = 0;
            }
        },
        /* 根据返回值判断类型 */
        getType(cion_type) {
            cion_type = Number(cion_type);
            switch (cion_type) {
                case 1:
                    return "签到";
                case 2:
                    return "充值";
                case 3:
                    return "提现";
                case 4:
                    return "趣练";
                case 5:
                    return "同步";
                case 6:
                    return "自评";
                case 7:
                    return "智测";
                case 8:
                    return "班级测验";
                case 9:
                    return "随堂练习";
                case 10:
                    return "课前作业";
                case 11:
                    return "课后作业";
                default:
                    "未知类型";
                    break;
            }
        },
        changeSelect() {
            this.page = 1;
            this.CionList();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.CionList();
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pagesize = val;
            this.CionList();
        }
    }
};
</script>

<style scoped lang="scss">
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 20px;
    box-sizing: border-box;

    .title {
        font-size: 18px;
        font-weight: 600;
        color: #4a4034;
    }
}

.stateBox {
    width: 100%;
    height: 140px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 15px;
    padding: 0 25px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .stateLeft {
        display: flex;
        align-items: center;

        .stateImg {
            width: 82px;
            height: 82px;

            margin-right: 20px;

            img {
                width: 100%;
            }
        }
        .stateTitle {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .stateFen {
            font-size: 30px;
            font-weight: 600;
            color: #009688;
        }
    }
}

.selectBox {
    margin-top: 15px;
    width: 100%;
    padding: 22px 25px 0 25px;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
}

.details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    box-sizing: border-box;

    font-size: 14px;
    color: #999999;

    span {
        margin-left: 30px;
    }
}

.listBox {
    width: 100%;
    min-height: 400px;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;

    .listItem {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listTitle {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .timeText {
            margin-top: 8px;
            font-size: 13px;
            color: #999999;
        }

        .green {
            color: #009688;
        }
    }
}

.noMore {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #6d7785;
    margin: 60px 0;
}

.content {
    width: 100%;
    margin: auto;
}
.text {
    color: #00d5a2;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: Bold;
    line-height: 44px;
}
.text span {
    color: #666666;
    font-size: 18px;
    font-weight: Regular !important;
    margin-left: 20px;
}
.last {
    color: #999999;
    font-size: 18px;
    font-weight: Regular !important;
}
</style>
